<template>
  <div class="hello">
    <!-- 柱形图渲染 -->
    <div id="chart">

    </div>
    <!-- 饼图渲染 -->
    <div id="pie">

    </div>
  </div>
</template>

<script>

import user from "../store/modules/user";

export default {
  name: 'index',
  data(){
    return {
      ws: null,
      url:"ws://127.0.0.1:9201/websocket/",
      barChart: null,
      pieChart: null,
      userId: null,
      username: null,
    }
  },
  mounted(){
    //挂载的时候进行初始化
    this.init()
  },
  created(){

  },
  destroyed () {
    //页面销毁时关闭ws连接
    if(this.ws){
      this.ws.close() // 关闭websocket
    }
  },
  methods:{
    /**初始化柱状图*/
    initChart(data){
      console.log(JSON.stringify(data))
      let x = [];
      let y = [];
      for (let i = 0; i < data.data.length; i++) {
        x.push(data.data[i].xaxisData)
        y.push(data.data[i].yaxisData)
      }

      if(!this.barChart){
        this.barChart= this.$echarts.init(document.getElementById('chart'))
      }
      let chart = this.barChart
      const option = {
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow'
            }
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          xAxis: [
            {
              type: 'category',
              data: y,
              axisTick: {
                alignWithLabel: true
              }
            }
          ],
          yAxis: [
            {
              type: 'value'
            }
          ],
          series: [
            {
              name: 'Direct',
              type: 'bar',
              barWidth: '60%',
              data: x
            }
          ]
        };
      chart.setOption(option)
    },
    init(){
      if (typeof (WebSocket) === 'undefined'){
        alert("您的浏览器不支持WebSocket")
        return false;
      }
      this.ws = new WebSocket(this.url+user.state.id+'/'+user.state.name)
      this.ws.onopen = this.websocketOnOpen;
      this.ws.onmessage = this.websocketOnMessage;
    },
    websocketOnOpen(){
      console.log("连接成功")
    },
    websocketOnMessage(e){
      let dataJson = JSON.parse(e.data)
      this.initChart(dataJson.server)
      this.initPie(dataJson.pie);
    },
    /**初始化饼状图*/
    initPie(pies){
      if(!this.pieChart){
        this.pieChart= this.$echarts.init(document.getElementById('pie'))
      }
      let chart = this.pieChart
      const option = {
        // legend 图例组件配置项 (图例,其实就是颜色指示器)
        legend: {
          top: "bottom", // 图例组件离容器上侧的距离。
        },
        // 工具栏组件
        toolbox: {
          show: true, // 是否显示工具栏组件
          feature: {
            mark: { show: false },
            dataView: { show: true, readOnly: false }, // 数据视图工具r
            restore: { show: true },  // 配置项还原
            saveAsImage: { show: true }, // 保存图片
          },
        },
        series: [
          {
            name: "农产品在线状态", // 名称
            type: "pie",  // 类型 饼图
            radius: [50, 150], // 饼图的半径 `50, 250 => 内半径 外半径`
            center: ["50%", "50%"], // 饼图的中心（圆心）坐标，数组的第一项是横坐标，第二项是纵坐标。
            roseType: "area", // 是否展示成南丁格尔图，通过半径区分数据大小
            // 图形的颜色
            itemStyle: {
              normal: {
                color: function(params) {
                  // 根据数据值决定颜色
                  if (params.data.value === 0) {
                    return '#CCCCCC';
                  } else {
                    return '#FE8463';
                  }
                },
                borderRadius: 8,
              },
            },
            // 图表的数据
            data: pies,
          },
        ],
      };
      // 3.5 将配置参数和图表关联
      chart.setOption(option);
      console.log(JSON.stringify(pies))
    },

  }
}
</script>

<style scoped lang="less">
.hello{
  display: flex;
  #chart,#pie{
    width: 600px;
    height: 400px;
    background-color: black;
  }
  #app{
    width: 600px;
    height: 400px;
    background-color: pink;
  }
  #pie{
    margin-left: 20px;
  }
  #app{
    margin-left: 20px;
  }
}
</style>
